<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <my-component v-model.capitalize="myText" />
  </div>

  <script>
    const app = Vue.createApp({
      setup() {
        const myText = Vue.ref('')
        return { myText }
      }
    })

    app.component('my-component', {
      props: {
        modelValue: String,
        modelModifiers: {
          default: () => ({})
        }
      },
      setup(props, context) {
        const emitValue = (e) => {
          let value = e.target.value
          // console.log(props.modelModifiers) // {capitalize: true}
          if (props.modelModifiers.capitalize) {
            value = value.charAt(0).toUpperCase() + value.slice(1)
          }
          context.emit('update:modelValue', value)
        }
        return {
          emitValue
        }
      },
      template: `
      <input
      type="text"
      :value="modelValue"
      @input="emitValue"/>
      `
    })
    app.mount('#app')
  </script>
</body>
</html>